<template>
    <div class="backup-and-restore">
      <h1>备份和恢复</h1>
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="备份管理" name="backup">
          <BackupOverview />
          <BackupHistory />
          <NewBackup />
          <BackupTaskManagement />
          <BackupSettings />
        </el-tab-pane>
        <el-tab-pane label="恢复管理" name="restore">
          <RestoreOverview />
          <RestoreHistory />
          <ExecuteRestore />
          <RestoreTaskManagement />
          <RestoreSettings />
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  import BackupOverview from '@/components/BackupOverview.vue'
  import BackupHistory from '@/components/BackupHistory.vue'
  import NewBackup from '@/components/NewBackup.vue'
  import BackupTaskManagement from '@/components/BackupTaskManagement.vue'
  import BackupSettings from '@/components/BackupSettings.vue'
  import RestoreOverview from '@/components/RestoreOverview.vue'
  import RestoreHistory from '@/components/RestoreHistory.vue'
  import ExecuteRestore from '@/components/ExecuteRestore.vue'
  import RestoreTaskManagement from '@/components/RestoreTaskManagement.vue'
  import RestoreSettings from '@/components/RestoreSettings.vue'
  
  const activeTab = ref('backup');
  
  const handleTabClick = (tab: any) => {
    console.log(`Switched to tab: ${tab.name}`);
  };
  </script>
  
  <style scoped>
  .backup-and-restore {
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */
    gap: 20px;
    padding: 20px;
  }
  </style>